<template>
	<view class="bg-white h_100">
		<u-sticky>
			<view class="setps bg-white">
				<view class="text-center" v-if="tipShow">
					<text class="tips font_24 text-white">{{ tipsText }}</text>
				</view>
				<view class="mt-1">
					<u-steps :current="current" activeColor="#CF1526">
						<u-steps-item title="品牌选择" :iconSize="15" @click.native="stepsChange(0)"></u-steps-item>
						<u-steps-item title="型号选择" :iconSize="15" @click.native="stepsChange(1)"></u-steps-item>
						<u-steps-item title="选择产品" :iconSize="15" @click.native="stepsChange(2)"></u-steps-item>
					</u-steps>
				</view>
			</view>
			<view class="p-2" style="background-color: #F2F2F2;"><search-view @search="searchChange" @clear="searchChange('')"></search-view></view>
		</u-sticky>
		<view class="scroll_top py-1" style="margin-bottom: 100rpx;">
			<view v-if="current == 0">
				<view
					class="text-center py-1 w-100 container font_24"
					v-for="(item, index) of brandList"
					:key="index"
					:class="{ 'bg_main text-white': item.isChange }"
					@click="cateChange(item, index)"
				>
					{{ item.title }}
				</view>
			</view>
			<view v-else-if="current == 1">
				<view
					class="text-center py-1 w-100 container font_24"
					v-for="(item, index) of typeList"
					:key="index"
					:class="{ 'bg_main text-white': item.isChange }"
					@click="typeChange(item, index)"
				>
					{{ item.product_series }}
				</view>
			</view>
			<view v-else>
				<view
					class="text-center py-1 w-100 container font_24"
					v-for="(item, index) of ProductList"
					:key="index"
					:class="{ 'bg_main text-white': item.isChange }"
					@click="productChange(item, index)"
				>
					{{ item.product_name }}
				</view>
			</view>
		</view>
		<view class="fixed-bottom">
			<button class="bg_main text-white font py-1" @click="nextChange">{{ submitText }}</button>
		</view>
		<u-modal :show="modalShow" title="通知" :showConfirmButton="false">
			<view class="slot-content">
				<view class="text-center font font-weight-bold py-2">发布成功</view>
				<button class="bg_main text-white font_24 mt-3 py px-5" @click="goPages('/subPages/my/company_main/index')">返回主页</button>
			</view>
		</u-modal>
		<u-back-top :scroll-top="scrollTop" top="200"></u-back-top>
	</view>
</template>

<script>
import searchView from '@/components/search/search.vue';
import { getProductBrands, getProductSeries, getApiProducts, addApiProduct } from '@/api/home/nav/product_data.js';
export default {
	components: { searchView },
	data() {
		return {
			topHeight: 0,
			scrollTop: 0,
			current: 0,
			isChange: false,
			productMid: '', //产品类型
			searchVal: '',
			tipShow: false,
			tipsText: '',
			submitText: '下一步',
			brandList: [], //品牌列表
			brand: '', //品牌
			typeList: [], //型号列表
			type: '', //型号
			ProductList: [],
			productId: '', //产品id
			modalShow: false
		};
	},
	onLoad(option) {
		this.productMid = option.mid;
		this.getBrands();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	methods: {
		searchChange(e) {
			// console.log(e);
			this.searchVal = e;
			if (this.current == 0) {
				this.getBrands();
			} else if (this.current == 1) {
				this.getType();
			} else {
				this.getProduct();
			}
		},
		getScroll() {
			let that = this;
			const query = uni.createSelectorQuery().in(that);
			query
				.select('.scroll_top')
				.boundingClientRect(data => {
					that.topHeight = data.top;
				})
				.exec();
			setTimeout(() => {
				uni.pageScrollTo({
					duration: 300,
					scrollTop: -that.topHeight //滚动高度，单位px，这里也可用选择器属性:selector:选择器
				});
			}, 50);
		},
		stepsChange(num) {
			this.getScroll();
			this.searchVal = '';
			if (num == 1) {
				this.submitText = '下一步';
				if (!this.brand) {
					this.tipShow = true;
					this.tipsText = '请选择品牌';
					return;
				} else {
					this.getType();
					this.current = 1;
				}
			} else if (num == 2) {
				this.submitText = '下一步';
				if (!this.brand) {
					this.tipShow = true;
					this.tipsText = '请选择品牌';
				} else if (!this.type) {
					this.tipShow = true;
					this.tipsText = '请选择型号';
					this.current = 1;
					this.getType();
					return;
				} else {
					this.getProduct();
					this.current = 2;
					this.submitText = '确认发布';
				}
			} else {
				this.getBrands();
				this.current = 0;
				this.submitText = '下一步';
			}
		},
		// 点击选择
		getChange(list, idx) {
			list.forEach((item, index) => {
				if (index == idx) {
					this.$set(list[index], 'isChange', true);
				} else {
					this.$set(list[index], 'isChange', false);
				}
			});
			this.tipShow = false;
		},
		// 获取产品品牌
		getBrands() {
			let msg = {
				mid: this.productMid,
				kw: this.searchVal
			};
			this.brandList = [];
			getProductBrands(msg)
				.then(res => {
					// console.log(res);
					for (let item of res.data) {
						this.brandList.push({ title: item, isChange: false });
					}
					// 已经选择过品牌后，从其他步骤跳转回来的回显
					if (this.brand) {
						let index = this.brandList.map(item => item.title).indexOf(this.brand);
						this.getChange(this.brandList, index);
					}
				})
				.catch(err => {
					console.log('获取品牌失败', err);
				});
		},
		cateChange(val, idx) {
			this.getChange(this.brandList, idx);
			this.brand = val.title;
			this.type = '';
			this.productId = '';
			// console.log("品牌",this.brand);
		},
		//获取产品型号
		getType() {
			let msg = {
				mid: this.productMid,
				product_brand: this.brand,
				kw: this.searchVal
			};
			getProductSeries(msg)
				.then(res => {
					// console.log('型号', res);
					this.typeList = res.data;
					// 已经选择过型号后，从其他步骤跳转回来的回显
					if (this.type) {
						let index = this.typeList.map(item => item.product_series).indexOf(this.type);
						this.getChange(this.typeList, index);
					}
				})
				.catch(err => {
					console.log('获取型号失败', err);
				});
		},
		typeChange(val, idx) {
			this.getChange(this.typeList, idx);
			this.type = val.product_series;
			this.productId = '';
			// console.log('型号', this.type);
		},
		// 获取产品列表
		getProduct() {
			let msg = {
				mid: this.productMid,
				product_brand: this.brand,
				product_series: this.type,
				kw: this.searchVal
			};
			getApiProducts(msg)
				.then(res => {
					// console.log('产品', res);
					this.ProductList = res.data;
					// 已经选择过产品后，从其他步骤跳转回来的回显
					if (this.productId) {
						let index = this.ProductList.map(item => item.id).indexOf(this.productId);
						this.getChange(this.ProductList, index);
					}
				})
				.catch(err => {
					console.log('获取产品失败', err);
				});
		},
		productChange(val, idx) {
			this.getChange(this.ProductList, idx);
			this.productId = val.id;
			// console.log('产品', this.productId);
		},
		nextChange() {
			this.getScroll();
			this.searchVal = '';
			if (this.current == 0) {
				if (!this.brand) {
					this.tipShow = true;
					this.tipsText = '请选择品牌';
					return;
				} else {
					this.getType();
					this.current = 1;
				}
			} else if (this.current == 1) {
				if (!this.type) {
					this.tipShow = true;
					this.tipsText = '请选择型号';
					return;
				} else {
					this.getProduct();
					this.current = 2;
					this.submitText = '确认发布';
				}
			} else {
				if (!this.productId) {
					this.tipShow = true;
					this.tipsText = '请选择产品';
					return;
				} else {
					let msg = {
						product_id: this.productId,
						mid: this.productMid,
						token: uni.getStorageSync('userInfo').token || ''
					};
					addApiProduct(msg)
						.then(res => {
							// console.log(res);
							if (res.code == 0) {
								this.modalShow = true;
							} else {
								uni.$u.toast(res.msg);
							}
						})
						.catch(err => {
							console.log('发布产品失败', err);
						});
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.setps {
	padding: 5rpx 120rpx 20rpx;
	z-index: 99;
	.tips {
		background: rgba(0, 0, 0, 0.5);
		padding: 5rpx 20rpx;
	}
}
</style>
